<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Store test page</title>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.22.custom.css"
	rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript">
	$(function() {

		$.get('actions/product.json', function(data) {
			alert(data.status);
			var product = data.result;
			$('<div> ' + product.name + ' : ' + product.value + '</div>')
					.appendTo('body');
		});

		$('table').selectable({
			filter : 'tr'
		});

		$('form input:button').click(
				function(event) {
					if ($('.ui-selected').length > 0) {
						var names = $('.ui-selected').map(function() {
							return $('td:first-child', $(this)).html();
						});
						var nameQueryString = $.param({
							'names[]' : names.toArray()
						});

						$.post('actions/selectedPeople.json', nameQueryString,
								function(data) {
									alert('data successfully submitted');
									$('tr').removeClass('ui-selected');
								});
					}
				});

		$('form').submit(function() {
			if ($('.ui-selected').length > 0) {
				var names = $('.ui-selected').map(function() {
					return $('td:first-child', $(this)).html();
				});
				$('input:hidden').val(names.toArray());
				$('tr').removeClass('ui-selected');

				return true;
			} else {
				return false;
			}
		});
	});
</script>
<style type="text/css">
table th {
	background-color: silver;
	border: 2px outset silver;
	font-size: 0.9em;
}

table#testSubject tr {
	background-color: white;
}

table td {
	background-color: transparent;
	padding: 1px 12px;
	font-size: 0.8em;
	text-align: center;
}

.ui-selectee {
	cursor: pointer;
}

.ui-selectee:hover {
	background-color: #ffe4c4;
}

.ui-selected {
	background-color: pink !important;
}
</style>
</head>
<body>
	<h1>jQuery UI test page</h1>
	<p></p>
	<table cellspacing="1" border="0">
		<thead>
			<th>Imię</th>
			<th>Nazwisko</th>
			<th>Miejsce urodzenia</th>
		</thead>
		<tbody>
			<tr>
				<td>Robert</td>
				<td>Boczek</td>
				<td>Zakopane</td>
			<tr>
				<td>Adam</td>
				<td>Kudła</td>
				<td>Złochowice</td>
			<tr>
				<td>Łukasz</td>
				<td>Papis</td>
				<td>Warszawa</td>
			<tr>
				<td>Agata</td>
				<td>Brzozowska</td>
				<td>Katowice</td>
			<tr>
				<td>Julia</td>
				<td>Paczosik</td>
				<td>Poznań</td>
		</tbody>

	</table>
	<form action="actions/selectedPeople.json" method="post">
		<input type="hidden" name="names[]" /> <input type="submit"
			value="Wyślij" /> <input type="button" value="Wyślij(ajax)" />
	</form>

</body>
</html>



